<section class="row">
	<div class="col-md-12">
		<h2>Bootstrap Magic <small> featuring Bootstrap 3, made with AngularJS</small></h2>
		<p>Discover our gitHub project at the following url : <a href="https://github.com/pikock/bootstrap-magic">Bootstrap magic GitHub Project</a>. Everyone can contribute and we would like to hear your feedback.</p>
	</div>
</section>

<section class="row-fluid">
    <div class="span12">
        <div class="tabbable"> 
            <ul class="nav nav-tabs">
                <li class="active"><a href="#tab1" data-toggle="tab" title="Bootstrap themes AngularJS">Links</a></li>
                <li><a href="#tab2" data-toggle="tab" title="Bootstrap themes generator AngularJS">Navs</a></li>
                <li><a href="#tab3" data-toggle="tab" title="Bootstrap themes generator AngularJS">Breadcrumbs & nav lists</a></li>
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="" title="Bootstrap themes AngularJS">Dropdown <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="" title="Bootstrap themes generator AngularJS">Action</a></li>
                        <li><a href="" title="Bootstrap themes generator AngularJS">Another action</a></li>
                        <li><a href="" title="Bootstrap themes generator AngularJS">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a href="" title="Bootstrap themes generator AngularJS">Separated link</a></li>
                    </ul>
                </li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="tab1">
        	        <p>For more information on <a href="http://en.orson.io/17/build-responsive-website-without-coding/?utm_source=Bootstrap%20Magic%20&utm_medium=referral&utm_content=Text&utm_campaign=Bootstrap" title="Orson">Orson</a>  please check out <a href="http://en.orson.io/17/build-responsive-website-without-coding/?utm_source=Bootstrap%20Magic%20&utm_medium=referral&utm_content=Text&utm_campaign=Bootstrap" title="Orson create your website easily">http://en.orson.io</a></p>
        	
        	        <p>For more information on <a href="http://www.autreplanete.com/" title="web agency paris">Autre planete</a>  please check out <a href="http://www.autreplanete.com/" title="web agency paris">http://www.autreplanete.com/</a></p>
        	
                    <p>These variables are applied for the text body color, <a href="" title="Twitter Bootstrap Themes Generator">links color</a> and  <a href="" title="Twitter Bootstrap Themes Generator">links color</a> hovered.</p>
                    <hr>
                </div>
                <div class="tab-pane" id="tab2">
                    <section class="row-fluid">
                        <div class="span6">
                            <ul class="nav nav-tabs nav-stacked">
                                <li class="active"><a href="" title="Bootstrap themes generator AngularJS">Home</a></li>
                                <li><a href="" title="Bootstrap themes generator AngularJS">Profile</a></li>
                                <li><a href="" title="Bootstrap themes generator AngularJS">Messages</a></li>
                            </ul>
                        </div>
                        <div class="span6">
                            <ul class="nav nav-pills nav-stacked">
                                <li class="active"><a href="" title="Twitter Bootstrap themes generator AngularJS">Home</a></li>
                                <li><a href="" title="Twitter Bootstrap themes generator AngularJS">Profile</a></li>
                                <li><a href="" title="Twitter Bootstrap themes generator AngularJS">Messages</a></li>
                            </ul>
                        </div>
                    </section>
                </div>
                <div class="tab-pane" id="tab3">
                    <section class="row-fluid">
                        <div class="span6">
                            <ul class="breadcrumb">
                                <li><a href="" title="Bootstrap themes generator AngularJS">Home</a> <span class="divider">/</span></li>
                                <li class="active">Kitchen</li>
                            </ul>
                            <ul class="breadcrumb">
                                <li><a href="" title="Bootstrap themes generator AngularJS">Home</a> <span class="divider">/</span></li>
                                <li><a href="" title="Bootstrap themes generator AngularJS">Kitchen</a> <span class="divider">/</span></li>
                                <li class="active">Toilet</li>
                            </ul>
                        </div>
                        <div class="span6">
                            <div class="well">
                                <ul class="nav nav-list">
                                    <li class="nav-header">List header</li>
                                    <li><a href="" title="Twitter Bootstrap themes generator AngularJS">Profile</a></li>
                                    <li><a href="" title="Twitter Bootstrap themes generator AngularJS">Settings</a></li>
                                </ul>
                            </div>



                        </div>
                    </section>

                </div>
            </div>
        </div>
    </div>
</section>


<section class="row-fluid">
    <div class="span12">
		<p>You could also set variables the border radius for differents size.</p>
	    <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>
                        <div class="btn-group">
                            <a href="" title="Bootstrap 3 Themes Generator" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Base <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="" title="Bootstrap 3 Themes Generator" href="">Action</a></li>
                                <li><a href="" title="Bootstrap 3 Themes Generator" href="">Another action</a></li>
                                <li><a href="" title="Bootstrap 3 Themes Generator" href="">Something else here</a></li>
                                <li class="divider"></li>
                                <li><a href="" title="Bootstrap 3 Themes Generator" href="">Separated link</a></li>
                            </ul>
                        </div>
                    </td>
                    <td>
                        <div class="btn-toolbar">
                            <div class="btn-group">
                                <a href="" title="Bootstrap 3 Themes Generator" class="btn btn-default">Left</a>
                                <a href="" title="Bootstrap 3 Themes Generator" class="btn btn-default">Middle</a>
                                <a href="" title="Bootstrap 3 Themes Generator" class="btn btn-default">Right</a>
                            </div>
                        </div>
                    </td>
                    <td>
                        <form class="form-inline" role="form">
                          <div class="form-group">
                            <input type="text" class="form-control" placeholder="your text">
                            <button href="" title="Bootstrap 3 Themes Generator" class="btn btn-default">Default</button>
                          </div>       
                        </form>         
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="btn-group">
                            <a class="btn btn-default btn-lg large dropdown-toggle" data-toggle="dropdown">Large <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="" title="Bootstrap 3 Themes Generator">Action</a></li>
                                <li><a href="" title="Bootstrap 3 Themes Generator">Another action</a></li>
                                <li><a href="" title="Bootstrap 3 Themes Generator">Something else here</a></li>
                                <li class="divider"></li>
                                <li><a href="" title="Bootstrap 3 Themes Generator">Separated link</a></li>
                            </ul>
                        </div>
                    </td>
                    <td>
                    <div class="btn-toolbar">
                        <div class="btn-group">
                            <a href="" title="Bootstrap 3 Themes Generator" class="btn btn-lg  btn-default">Left</a>
                            <a href="" title="Bootstrap 3 Themes Generator" class="btn btn-lg  btn-default">Middle</a>
                            <a href="" title="Bootstrap 3 Themes Generator" class="btn btn-lg  btn-default">Right</a>
                        </div>
                    </div>
                    </td>
                    <td>
                        <ul class="pagination pagination-lg">
                            <li class="disabled"><a href="" title="Bootstrap 3 Themes Generator">«</a></li>
                            <li class="active"><a href="" title="Bootstrap 3 Themes Generator">1</a></li>
                            <li><a href="" title="Bootstrap 3 Themes Generator">2</a></li>
                            <li><a href="" title="Bootstrap 3 Themes Generator">3</a></li>
                            <li><a href="" title="Bootstrap 3 Themes Generator">»</a></li>
                        </ul>
                    </td>
                </tr>
                <tr>
                    <td><a class="btn btn-sm btn-default" href="" title="Bootstrap 3 Themes Generator">Small</a></td>
                    <td>
                        <div class="well well-small">
                            .well-small component
                        </div>
                    </td>
                    <td>
                        <ul class="pagination pagination-sm">
                            <li><a href="" title="Bootstrap 3 Themes Generator">«</a></li>
                            <li><a href="" title="Bootstrap 3 Themes Generator">1</a></li>
                            <li><a href="" title="Bootstrap 3 Themes Generator">2</a></li>
                            <li><a href="" title="Bootstrap 3 Themes Generator">3</a></li>
                            <li><a href="" title="Bootstrap 3 Themes Generator">4</a></li>
                            <li><a href="" title="Bootstrap 3 Themes Generator">5</a></li>
                            <li><a href="" title="Bootstrap 3 Themes Generator">»</a></li>
                        </ul>
                    </td>
                </tr>
            </tbody>
	    </table>
	</div>
</section>